﻿@*@using CQIE.OVS.Model
@model IList<CQIE.OVS.Model.Activity>*@

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ActiveManager</title>
    <link href="~/kj/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        .fontsize {
            height: 38px;
            line-height: 38px;
        }

        td {
            text-align: center;
        }
    </style>
</head>
<body class="layui-col-md8 layui-col-md-offset1" style="margin-top: 10px;">
    <div class="layui-form-item">
        <div class="layui-col-md4 layui-col-md-offset4">
            <input name="searchName" type="text" value="@ViewBag.SearchName" class="layui-col-md9 fontsize" placeholder="请输入" />
            <button type="button" name="Search" class="layui-btn layui-btn-norma layui-bg-black layui-col-md3">搜索</button>
        </div>
    </div>

    <table id="Activetable" lay-filter="Activetable">
    </table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" id="link" lay-event="link">复制链接</a>
    </script>

    <div id="page"></div>
<script src="~/kj/layui/layui.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>
    <script>
    layui.use(['laypage', 'form','table','jquery','layer'],
        function() {
            var laypage = layui.laypage;
            var form = layui.form;
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;

            //table渲染方法
            function tablerender() {
                table.render({
                    elem: '#Activetable'
                    , height: 535
                    , url: '/Active/GetList' //数据接口
                    , where: { searchName: $('input[name=searchName]').val() }
                    , title: '用户表'
                    , page: true //开启分页
                    , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , id: "Id"
                    , cols: [
                        [//表头
                            { type: 'checkbox', align: 'center' },
                            { align: 'center', type: 'numbers' },
                            { field: 'Title', title: '名称', width: 150,align: 'center'},
                            { field: 'Info', title: '简介', width: 347.4, align: 'center' },
                            { field: 'CamNum', title: '参加人数', width: 96, align: 'center' },
                            { field: 'State', title: '状态', width: 96,align: 'center' },
                            { title: '操作', width: 247, align: 'center', toolbar: '#barDemo' }
                        ]
                    ], parseData: function(res) { //res 即为原始返回的数据
                        //console.log(res);
                        return {
                            "code": res.status, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.data //解析数据列表
                        };
                    }
                });
                $('td[data-field=Id]').hide();
            }

            //Active单个删除
            function DeleteActive(id) {
                $.get("/Active/DeleteActive",
                    {'Id' : id},
                    function() {
                        layer.msg('删除成功');
                        tablerender();
                    });
            }

            //监听搜索按钮事件
            $('button[name=Search]').click(function () {
                tablerender();
            });

            //渲染table
            tablerender();

            //监听头工具栏事件
            table.on('toolbar(Activetable)',
                function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        layer.open({
                            type: 2
                            , title: '添加活动'
                            , resize: false
                            , content: "/Active/CreateActive"
                            , area: ['743px', '602px']
                            , end: function() {
                                tablerender();
                            }
                        });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.open({
                            type: 2
                            , title: '编辑活动'
                            , content: '/Active/EditActive?Id='+data[0].Id
                            , area: ['796px', '610px']
                            , end: function() {
                                tablerender();
                            }
                        });
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        console.log(data);
                        layer.msg('删除');
                        $.each(data,
                            function() {
                                DeleteActive(this.Id);
                            });
                    }
                    break;
                };
            });

            //监听操作栏事件
            table.on('tool(Activetable)',
                function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        ,
                        layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'detail') {
                        layer.open({
                            type: 2,
                            title: '查看',
                            content: '/Active/DetailActive?Id=' + data.Id,
                            area: ['723px', '610px'],
                            btn: ['查看结果', '返回'],
                            btn1: function(index) {
                                layer.close(index);
                                layer.open({
                                    type: 2
                                    , content: "/Active/GetResult?Aid="+data.Id
                                    , area:['831px','585px']
                                });
                            },
                            btn2: function(index) {
                                layer.close(index);
                            },
                            end: function() {
                                tablerender();
                            }
                        });
                    } else if (layEvent === 'del') {
                        layer.confirm('真的删除行么',
                            function(index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                DeleteActive(data.Id);
                            });
                    }
                    else if (layEvent === 'edit') {

                        if (data.State == '已结束') {
                            layer.open({
                                btn: ['查看结果', '返回'],
                                btn1: function (index) {
                                    layer.close(index);
                                    layer.open({
                                        type: 2
                                        , content: "/Active/GetResult?Aid="+data.Id
                                        , area:['831px','585px']
                                    });
                                },
                                btn2: function (index) {
                                    layer.close(index);
                                },
                                title: '提示',
                                content: '该活动已结束无法进行修改，是否查看结果？'
                            });
                        }

                        else if (data.State == '进行中') {
                            console.log(data.State);
                            layer.open({
                                btn: ['查看结果', '返回'],
                                btn1: function(index) {
                                    layer.close(index);
                                    layer.open({
                                        //查看结果
                                        type: 2
                                        , content: "/Active/GetResult?Aid="+data.Id
                                        , area:['831px','585px']
                                    });
                                },
                                btn2: function(index) {
                                    layer.close(index);
                                },
                                title: '提示',
                                content: '该活动进行中无法进行修改，是否查看当前结果？'
                            });
                        } else {
                            layer.open({
                                type: 2
                                , title: '编辑活动'
                                , content: '/Active/EditActive?Id='+data.Id
                                , area: ['796px', '610px']
                                , end: function() {
                                    tablerender();
                                }
                            });
                        }

                        return false;
                    }

                    else if (layEvent === 'link') {
                        var content = 'https://localhost:44332/' + 'Home/Active?Aid=' + data.Id;
                        var clipboard = new Clipboard('#link', {
                            text: function() {
                                return content;
                            }
                        });
                        clipboard.on('success', function (e) {
                            layer.msg("活动链接复制成功！");
                        });
 
                        clipboard.on('error', function(e) {
                            console.log(e);
                            layer.msg("好像出了点问题？!");
                        });
                    }
                });
        });
    </script>
</body>
</html>
